<template>
  <div class="pageBox">
    <head-component :title="!disabled ? '凭证上传' : '凭证详情'"></head-component>
    <div class="content">
      <div class="main">
        <div class="mainLine"></div>
        <div class="iptBox">
          <p>交易所账号</p>
          <input
            type="text"
            placeholder="请输入您的交易所账号"
            v-model="form.account"
          />
        </div>
        <div class="iptBox">
          <p>姓名</p>
          <input type="text" placeholder="请输入姓名" v-model="form.name" />
        </div>
        <div class="iptBox">
          <p>电话</p>
          <input
            type="text"
            placeholder="请输入您的电话"
            v-model="form.mobile"
          />
        </div>
        <div class="iptBox">
          <p>节点人</p>
          <input
            type="text"
            placeholder="请输入节点人的姓名"
            v-model="form.name2"
          />
        </div>
        <div class="iptBox">
          <p>节点人电话</p>
          <input
            type="text"
            placeholder="请输入节点人的电话"
            v-model="form.mobile2"
          />
        </div>

        <div class="uploadBox">
          <div class="uploadTitle">上传凭证</div>
          <van-uploader
            :after-read="afterRead"
            v-model="fileList1"
            multiple
            :max-count="1"
            @delete="delImg"
            :disabled="disabled"
          >
            <img
              class="uploadImg1"
              :src="uploadImg1 ? uploadImg1 : uploadImg"
              alt=""
            />
          </van-uploader>
        </div>

        <button class="exchangeBtn" v-if="!disabled">立即上传</button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, reactive, ref } from "vue";
import headComponent from "../../components/headComponent.vue";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const form = reactive({
      account: "",
      name: "",
      mobile: "",
      name2: "",
      mobile2: "",
    });
    const fileList1 = ref([]);
    const uploadImg1 = ref("");
    const uploadImg = require("@/image/my/uploadBg.png");

    const disabled = ref(false);

    const afterRead = (file) => {
      let formData = new FormData();
      formData.append("file", file.file);
    };

    function delImg() {
      uploadImg1.value = "";
    }

    return {
      form,
      fileList1,
      uploadImg1,
      uploadImg,
      disabled,
      afterRead,
      delImg,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  padding-bottom: 101px;

  .content {
    padding: 40px 30px 0;
    .main {
      padding: 70px 40px 80px;
      position: relative;
      background: #ffffff;
      box-shadow: 0px 8px 16px 0px rgba(223, 207, 207, 0.5);
      border-radius: 20px;
      .mainLine {
        width: 100%;
        height: 9px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        border-radius: 20px 20px 0 0;
        position: absolute;
        left: 0;
        top: 0;
      }

      .iptBox {
        margin-bottom: 82px;
        p {
          font-size: 34px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 40px;
        }
        input {
          background-color: transparent;
          border: none;
          color: #333;
          font-size: 28px;
        }
        input::-webkit-input-placeholder {
          color: #cccccc;
          font-size: 28px;
        }

        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #cccccc;
          font-size: 28px;
        }

        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #cccccc;
          font-size: 28px;
        }

        input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: #cccccc;
          font-size: 28px;
        }
      }
      .uploadBox {
        .uploadTitle {
          font-size: 34px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 30px;
        }
        :deep(.van-uploader__upload) {
          width: 200px;
          height: 200px;
          margin: 0;
        }
        :deep(.van-uploader__upload-icon) {
          display: none;
        }
        :deep(.van-uploader__preview) {
          width: 200px;
          height: 200px;
          margin: 0;
        }
        :deep(.van-uploader__preview-image) {
          width: 200px;
          height: 200px;
        }
        :deep(.van-image__img) {
          width: 200px;
          height: 200px;
        }
        .uploadImg1 {
          width: 200px;
          height: 200px;
        }
      }

      .exchangeBtn {
        font-size: 32px;
        font-weight: 500;
        color: #ffffff;
        width: 92%;
        height: 88px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        box-shadow: 0px 8px 20px 0px rgba(204, 58, 70, 0.4);
        border-radius: 16px;
        margin: 80px auto 0;
        display: block;
        border: none;
      }
    }
  }
}
</style>